<template>
	<view class="center-box">


		<view class="fiex-box pl30 pr30 flex justify-between align-center">
			<view class="">
				<i class="cuIcon-back f35" @click="back"></i>
			</view>
			<view class="" @click="popupShow = true">
				<i class="cuIcon-moreandroid"></i>
			</view>
		</view>


		<view class="head-center">
			<image v-if="userInfo.cover == ''" src="../../static/img.jpg" class="ww100 h560" mode=""
				@click="onTheCover = true"></image>
			<image v-else :src="userInfo.cover" class="ww100 h560" mode="" @click="onTheCover = true"></image>

			<view class="mt29 pl30 pr30">
				<view class=" flex align-center justify-between">
					<view class="flex align-center">
						<text class="black f32 mr30" style="font-weight: 600;">{{userInfo.nickName}}</text>
						<i class="cuIcon-male mr8" style="color: #40C6A8; font-weight: 700;"
							v-if="userInfo.sex == 1"></i>
						<i class="cuIcon-female" style="color: #FF328E; font-weight: 700;" v-else></i>
						<text style="color: #666666; font-size: 22rpx;">25</text>
						<view class="bgc-border" v-if="userInfo.isAuth == 0">
							未认证
						</view>

						<view class="bgc-border1" v-else>
							已认证
						</view>


					</view>
					<view class="bgc-authentication">
						<text v-if="userInfo.isFollow == 0" @click="followUser(0,userInfo.id)">关注</text>
						<text v-if="userInfo.isFollow == 1" @click="followUser(2,userInfo.id)">已关注</text>
					</view>
				</view>


				<view class="mb25 flex align-center mt25">
					<view class="bgc">
						{{userInfo.headTitle}}
					</view>
					<!-- 会员等级 -1普通用户 0 普通会员 1普通VIP 2 高级VIP 3 钻石VIP 4至尊VIP -->
					<image v-if="userInfo.menberLabel == -1" src="../../static/vip/huiyuan.png" class="w110 h30 ml36"
						mode=""></image>
					<image v-if="userInfo.menberLabel == 0" src="../../static/vip/huiyuan.png" class="w110 h30 ml36"
						mode=""></image>
					<image v-if="userInfo.menberLabel == 1" src="../../static/vip/putong.png" class="w110 h30 ml36"
						mode=""></image>
					<image v-if="userInfo.menberLabel == 2" src="../../static/vip/gaoji.png" class="w110 h30 ml36"
						mode=""></image>
					<image v-if="userInfo.menberLabel == 3" src="../../static/vip/zs.png" class="w110 h30 ml36" mode="">
					</image>
					<image v-if="userInfo.menberLabel == 4" src="../../static/vip/zhizun.png" class="w110 h30 ml36"
						mode=""></image>
					<!-- <image src="../../static/vip/gaoji.png" class="w110 h40" mode=""></image> -->
				</view>
				<view class="f26" style="color: #333333;">
					<i class="cuIcon-title" style="color: #40C6A8;"></i>
					<text class="ml8 mr24">在线</text>
					<text>{{km}}km {{userInfo.address}}</text>
				</view>
				<view class="mt21 mb29 w176" style="text-overflow: ellipsis; overflow: hidden; white-space: nowrap;">
					{{userInfo.dynamic}}
				</view>
				<view class="flex flex-wrap tag-text">
					<u-tag bg-color="#F5F5F0" border-color="#F5F5F0" color="#333"
						v-for="(item1,index) in userInfo.apiUserDynamicTopics" :key="index" :text="item1.topic"
						style="margin: 0 24rpx 20rpx;" type="success" />
				</view>

				<view class=" mt18">
					<view class="flex justify-between">
						<view class="f28">
							<i class="cuIcon-album mr10"></i>
							<text>个人相册（{{total}}）</text>
						</view>
						<view class="">
							<text v-if="isUnlock == 0" @click="addPhone">未解锁</text>
							<text v-if="isUnlock == 1" @click="l.to('/pages/home/personagePhone')">已解锁</text>

							<i class="cuIcon-right"></i>
						</view>
					</view>

					<view class="flex pt30 pb40 flex-wrap">
						<image v-for="(item,index) in phoneList" :key="index" :src="item.albumImg"
							class="w215 h215 r10 mr25 img-mar" mode=""></image>

					</view>
				</view>
			</view>

			<view class="ww100 h20" style="background-color: #FAF7FA;">
			</view>



			<!-- 这里的技能和是否开通陪玩有关 -->
			<view class="pt30 pl30 pr30">
				<view class="flex f28 align-center">
					<image src="../../static/img/ps.png" class="w30 h30 mr13" mode=""></image>
					<text>技能</text>
				</view>

				<view class="flex pt39 ww100 " v-for="(item, index) in userPlatlist" :key="index">
					<image :src="item.kindImg" class="w100 h100 mr41 mt5" mode=""></image>
					<view class="ww88">
						<view class="flex justify-between ww100">
							<view class="">
								<view class="mb19">
									{{item.kindName}}
								</view>
								<text class="" style="color: #999999;">{{item.orderNum}}人下单</text>
							</view>
							<view class="bgc-order">
								下单
							</view>
						</view>
						<view class="mt26 flex mb18 align-center" style="color: #FF7C42 ;">
							<image src="../../static/img/price.png" class="w24 h28 mr13" mode=""></image>
							{{item.price}}星
							<text style="color: #1F1F1F; font-size: 20rpx;">/次</text>
						</view>
					</view>
				</view>
			</view>

			<view class="ww100 pading pb30">
				<z-paging ref='paging' v-model='userPhoneList' @query='listUserPhone' :use-page-scroll="true"
					:default-page-size='5' loading-more-no-more-text='我也是有底线的！' :show-refresher-update-time='true'
					:refresher-update-time-key="'1'">
					<view>

						<view class="pt39 pl28 flex r10" style="background-color: #FFFFFF;"
							v-for="(item,index) in userPhoneList" :key="index">
							<view class="w90 mr40" style="word-wrap:break-word; font-weight: 600;">
								{{$u.timeFormat(item.addDate, 'yyyy/mm/dd')}}
							</view>
							<view class="" style="width: 78%;">
								<view class=" flex justify-between align-center">
									<text>{{item.dynamic}}</text>
									<i class="cuIcon-more" @click="removeInit(item.id)"
										v-if="item.uid == userRmoveId"></i>
								</view>
								<view class=" mt30">
									<image v-for="(item1, index) in item.apiUserDynamicImgList" :key="index"
										@click="phoneInfo(item1.img)" :src="item1.img" class="w164 h164 r10 mr18"
										mode=""></image>
								</view>

								<view class="f22 flex justify-between mt18 mb40" style="color: #666666;">
									<view class="">

									</view>
									<view class="">


										<i class="cuIcon-like" v-if="item.isLove == 0" @click="addGoods"></i>
										<i style="color:#FF2B8A;" class="cuIcon-likefill" v-else @click="addGoods"></i>
										<text class="mr21 ml8">{{item.loveNum}}</text>
										<i class="cuIcon-message"></i>
										<text class="mr21 ml8">{{item.commentNum}}</text>
										<i class="cuIcon-favor" v-if="item.isCollect == 0" @click="dyn"></i>
										<i class="cuIcon-favor" style="color:#FF2B8A;" v-else @click="dyn"></i>
										<text class="ml8">{{item.collectNum}}</text>
									</view>
								</view>
							</view>
						</view>

					</view>
				</z-paging>

			</view>


			<view class="apply flex">
				<view class="apply-btn" @click="private">
					申请约会
				</view>
				<view class="phone-btn" @click="voiceProp == true">
					<image src="../../static/img/phone.png" class="w42 h42" style="margin: auto;" mode=""></image>
				</view>
				<view class="sp-btn">
					<image src="../../static/img/sp.png" class="w42 h42" style="margin: auto;" mode=""></image>
				</view>
			</view>
		</view>



		<u-popup v-model="onTheCover" mode="bottom" border-radius="30">
			<view class="mt38 text-center">
				<view class="h97 lh97 pop-border-bottom" @click="uploadPhone">
					更换封面
				</view>
				<view class="h97 lh97" @click="onTheCover = false">
					取消
				</view>
			</view>
		</u-popup>



		<u-popup v-model="popupShow" mode="bottom" height="300" border-radius="30">
			<view class="mt84 f28 flex justify-around" style="color: #333333;">
				<view class="text-center" @click="alterRemark">
					<view class="bgc-img">
						<image src="../../static/img/remark.png" class="w46 h46" mode=""></image>
					</view>
					<view class="mt26">备注</view>
				</view>
				<view class="text-center">
					<view class="bgc-img">
						<image src="../../static/img/road.png" class="w46 h46" mode=""></image>
					</view>
					<view class="mt26">拉黑</view>
				</view>
				<view class="text-center" @click="l.to('/pages/home/inform')">
					<view class="bgc-img">
						<image src="../../static/img/jubao.png" class="w46 h46" mode=""></image>
					</view>
					<view class="mt26">举报</view>
				</view>
			</view>
		</u-popup>


		<u-popup v-model="alterShow" mode="center" width="520" height="260" border-radius="30">
			<view class="mt54 f28 text-center" style="color: #333333;">
				<view class="">
					你还没有认证!
				</view>
				<button type="default" class="cu-btn btn-bgc f30"><text>去认证</text></button>
			</view>
		</u-popup>


		<u-popup v-model="voiceProp" mode="center" width="520" height="260" border-radius="30">
			<view class="mt54 f28 text-center" style="color: #333333;">
				<view class="">
					解锁语视频通话需要成为会员喔
				</view>
				<button type="default" class="cu-btn btn-bgc f30"><text>成为会员</text></button>
			</view>
		</u-popup>


		<u-popup v-model="propBtn" height="300" border-radius="30" mode="bottom">
			<view class="w100 hh100 pt99 pl66 flex">
				<view class="text-center w80" @click="removerShow = true">
					<view class="bgc-text mb25">
						<i class="cuIcon-delete f38" style="color: #40C6A8; margin: auto;"></i>
					</view>
					<text class="">
						删除
					</text>
				</view>
				<!-- <view class="ml70">
					<view class="bgc-text mb25">
						<image src="../../static/img/jub.png" class="w50 h50" mode=""></image>
					</view>
					<text class="">
						举报
					</text>
				</view> -->
			</view>
		</u-popup>

		<u-modal v-model="removerShow" :show-cancel-button="true" @cancel="propBtn = false" :content="content"
			@confirm="removeList"></u-modal>

		<view class="foot_box"></view>
		<!-- 加载提示 -->
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<!-- 信息提示-->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import amap from '@/commonsdk/SDK/amap-wx.js';
	export default {
		data() {
			return {
				background: {
					backgroundColor: 'transparent',

					// 导航栏背景图
					// background: 'url(https://cdn.uviewui.com/uview/swiper/1.jpg) no-repeat',
					// 还可以设置背景图size属性
					// backgroundSize: 'cover',
				},
				onTheCover: false,
				popupShow: false,
				alterShow: false,
				voiceProp: false,
				propBtn: false,
				removerShow: false,
				content: '确定删除？',
				dynId: '',
				imgUrl: '',
				userInfo: {},
				userDeatil: {},
				total: '', // 总条数
				origins: '',
				km: '',
				userPlatlist: '',
				phoneList: [],
				isUnlock: '',
				userId: '',
				current: 1,
				userRmoveId: uni.getStorageSync('userInfo').id,
				userPhoneList: [],
				removeId: '',
			};
		},
		onShow() {},
		onLoad(e) {
			this.dynId = e.dynId
			this.userId = e.userId
			this.mapLocation()
			this.getUserInfo()
			this.userPlay(e.userId)
			this.unlockList(this.userId)
			this.listUserPhone(1, 5)
			// this.getUserListInfo()
		},
		// onReachBottom() {
		// 	this.current++
		// 	this.listUserPhone(1, 5)
		// 	console.log('4444')
		// },
		methods: {

			mapLocation() {
				var that = this
				// uni.getLocation({
				// 	type: 'wgs84',
				// 	success: function(res) {
				// 		console.log('当前位置的经度：' + res.longitude);
				// 		console.log('当前位置的纬度：' + res.latitude);
				// 		that.origins = res.longitude + ',' + res.latitude
				// 	}
				// });

				this.amapPlugin = new amap.AMapWX({
					//高德地图KEY，随时失效，请务必替换为自己的KEY，参考：http://ask.dcloud.net.cn/article/35070
					key: 'b9f002e72df0b071c51a8237c18b07a5',
				});
				uni.showLoading({
					title: '获取信息中',
				});
				this.amapPlugin.getRegeo({
					success: res => {
						console.log('data: ', res[0].longitude);
						that.origins = res[0].longitude + ',' + res[0].latitude
						console.log('that.origins==>', that.origins);
						that.getInstance()
					},
				});
			},

			async getInstance() {
				const res = await this.$u.get('api/user/dyn/instance', {
					address: this.userInfo.place,
					origins: this.origins,
				})
				this.km = res.data / 1000
			},

			back() {
				uni.navigateBack({
					delta: 1
				})
			},

			private() {
				this.l.to('/pages/home/private')
			},

			uploadPhone() {
				uni.chooseImage({
					count: 1,
					success: (chooseImageRes) => {
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: this.UPLOADFILE, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							// formData: {
							//     'user': 'test'
							// },
							success: (uploadFileRes) => {
								this.onTheCover = false
								var url = JSON.parse(uploadFileRes.data)
								this.imgUrl = url.data
								this.alterPhone(this.imgUrl)
							}
						});
					}
				});
			},

			alterRemark() {
				this.l.to('/pages/home/alterRemark?userId=' + this.userId)
			},

			// async getUserListInfo() {
			// 	const res = await this.$u.get(`api/user/dyn/userDynDetail/${this.dynId}`)
			// 	this.userDeatil = res.data
			// 	this.getInstance()
			// },

			async alterPhone(url) {
				const res = await this.$u.put('api/user/modifyCover', {
					cover: url,
				})
				this.l.msgg(res.msg)
			},

			async getUserInfo() {
				const res = await this.$u.get('api/user/queryUser')
				this.userInfo = res.data
				
			},

			async followUser(index, id) {
				const res = await this.$u.post('api/follow/userFollow', {
					followType: index,
					followUid: id,
				})
				this.l.msgg(res.msg)
				if (res.code == 200) {
					this.getUserListInfo()
				}
			},

			async userPlay(id) {
				const res = await this.$u.get(`api/user/play/userPlay/${id}`)
				this.userPlatlist = res.data
			},

			async unlockList(id) {
				const res = await this.$u.get(`api/user/unlock/unlockList/${id}`)
				this.total = res.data.list.length
				if (this.total == 1) {
					this.phoneList = res.data.list
				} else if (this.total == 2) {
					this.phoneList = res.data.list
				} else if (this.total >= 3) {
					this.phoneList.push(res.data.list[0])
					this.phoneList.push(res.data.list[1])
					// this.phoneList.push(res.data.list[2])
				}

				this.isUnlock = res.data.isUnlock
			},

			async addPhone() {
				var arr = []
				var obj = {
					albumId: 0,
					unlockUid: Number(this.userId)
				}
				arr.push(obj)

				const res = await this.$u.post('api/user/unlock/add', {
					apiUserUnlockList: arr
				})

				this.l.msgg(res.msg)
				if (res.code == 200) {
					this.unlockList(this.userId)
					this.l.to('/pages/home/personagePhone')
				}
			},

			// async listUserPhone() {
			// 	const res = await this.$u.get(`api/user/dyn/userDyn/${this.current}/${2}/${this.userId}`)
			// 	this.userPhoneList = [...this.userPhoneList, ...res.data]
			// },

			async listUserPhone(pageNo, pageSize) {
				let obj = {
					page: pageNo,
					page_size: pageSize,
				};
				const res = await this.$u.get(`api/user/dyn/userDyn/${pageNo}/${pageSize}/${this.userId}`)
				if (!res.code) return;
				console.log('res: ', res);
				this.$refs.paging.complete(res.data);
			},

			removeInit(id) {
				this.propBtn = true
				this.removeId = id
			},

			async removeList() {
				this.propBtn = false
				const res = await this.$u.delete(`api/user/dyn/delUerDyn/${this.removeId}`)
				this.l.msgg(res.msg)
				if (res.code == 200) {

					this.listUserPhone(1, 5)
				}
			},

			phoneInfo(img) {
				this.l.previewImage(Array(img))
			}

		}
	};
</script>

<style lang="scss" scoped>
	/deep/.fiex-box {
		position: fixed;
		top: 67rpx;
		width: 100%;
		z-index: 999;
		color: #333333;
		background-color: transparent !important;
	}

	.bgc-text {
		border-radius: 10rpx;
		padding: 14rpx 25rpx;
		color: #666666;
		font-size: 24rpx;
		width: 80rpx;
		height: 80rpx;
		display: flex;
		justify-content: center;
		border-radius: 40rpx;
		background-color: #F0F0F0;
	}


	.center-box {
		width: 100%;
		height: 100%;


		.head-center {
			padding-bottom: 140rpx;

			.bgc-border {
				padding: 4rpx 7rpx;
				border-radius: 6rpx;
				color: #4D4D4D;
				margin-left: 29rpx;
				font-size: 22rpx;
				border: 1rpx solid #B3B3B3;
			}

			.bgc-border1 {
				padding: 4rpx 7rpx;
				border-radius: 6rpx;
				color: #FDD226;
				margin-left: 29rpx;
				font-size: 22rpx;
				border: 1rpx solid #FDD226;
			}

			.bgc-authentication {
				padding: 14rpx 38rpx;
				color: #FFFFFF;
				border-radius: 10rpx;
				background-color: #020002;
			}

			.bgc {
				padding: 5rpx 11rpx;
				color: #40C6A8;
				font-size: 22rpx;
				border-radius: 30rpx;
				margin-right: 14rpx;
				border: 2rpx solid #40C6A8;
			}

			.img-mar:nth-child(3n) {
				margin-right: 0;
			}
		}

		.bgc-tag {
			font-size: 22rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			border-radius: 6px;
			background: #F5F5F0;
		}

		.tag-text {
			flex-wrap: wrap;
		}

		.bgc-order {
			width: 120rpx;
			height: 50rpx;
			text-align: center;
			line-height: 50rpx;
			background: #FFFFFF;
			color: #B127C1;
			box-shadow: 0px 0px 8rpx 0px rgba(209, 40, 229, 0.12);
			border-radius: 25rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
		}

		.pading {
			padding: 20rpx 30rpx;
			background-color: #FAF7FA;
		}

		.apply {
			width: 100%;
			height: 120rpx;
			position: fixed;
			bottom: 0;
			line-height: 120rpx;
			z-index: 999;
			background-color: #FFFFFF;
		}

		.apply-btn {
			width: 460rpx;
			height: 80rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
			margin: 20rpx 25rpx;
			font-size: 30rpx;
			border-radius: 40rpx;
			background-color: #000000;
		}

		.phone-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			margin: 20rpx 35rpx;
			display: flex;
			justify-content: center;
			background-color: #000000;
		}

		.sp-btn {
			width: 80rpx;
			height: 80rpx;
			border-radius: 40rpx;
			display: flex;
			margin-top: 20rpx;
			justify-content: center;
			background-color: #000000;
		}

	}

	.pop-border-bottom {
		color: #000000;
		font-size: 28rpx;
		font-family: PingFang SC;
		border-bottom: 4rpx solid #FAFAFA;
	}

	.bgc-img {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		// text-align: center;
		display: flex;
		justify-content: center;
		border-radius: 40rpx;
		background-color: #f7f7f7;

		image {
			margin: auto;
		}
	}

	.btn-bgc {
		color: #FFFFFF;
		margin-top: 50rpx;
		margin-bottom: 60rpx;
		background-color: #000000;
	}
</style>
